import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Tabs, Button, Popover, Toast, Swiper, Tag, Popup, Stepper } from 'antd-mobile'
import { LeftOutline, AppstoreOutline, StarOutline, ScanningOutline, HandPayCircleOutline, TransportQRcodeOutline, AntOutline } from 'antd-mobile-icons'
import "../style/details.scss"
import { detail } from "../apis/home"
import Sell from '../components/home/Sell'
import { add_cart } from '../apis/shopcart'

const actions = [
  { key: 'scan', icon: <ScanningOutline />, text: '扫一扫' },
  { key: 'payment', icon: <HandPayCircleOutline />, text: '付钱/收钱' },
  { key: 'bus', icon: <TransportQRcodeOutline />, text: '乘车码' },
  { key: 'assistant', icon: <AntOutline />, text: '智能助理' },
]


export default function Details() {
  const navigate = useNavigate()
  const [data, setdata] = useState<any>({})
  const [visible1, setVisible1] = useState(false)
  const [num, setnum] = useState(1)
  const location = useLocation()
  useEffect(() => {
    initia()
  }, [])

  let initia = async () => {
    let res: any = await detail(location.state.proid)
    setdata(res.data)
    console.log(res.data);
  }

  let back = () => {
    navigate(-1)
  }

  let add = async () => {
    let res = await add_cart(localStorage.getItem("userid"), location.state.proid, num)
    console.log(res);
    setVisible1(false)
    console.log(num);
  }
  return (
    <div className='details'>
      <div className="box">
        <Tabs defaultActiveKey="details">
          <Tabs.Tab title={<LeftOutline onClick={() => back()} fontSize={26} color="#000" />} disabled key='back' />

          <Tabs.Tab title='详情' key='details'>
            <Swiper
              indicator={(total, current) => (
                <div className='customIndicator'>
                  {`${current + 1} / ${total}`}
                </div>
              )}>
              <Swiper.Item>
                <img src={`${data.img1}`} alt="" />
              </Swiper.Item>
              <Swiper.Item>
                <img src={`${data.img2}`} alt="" />
              </Swiper.Item>
              <Swiper.Item>
                <img src={`${data.img3}`} alt="" />
              </Swiper.Item>
              <Swiper.Item>
                <img src={`${data.img4}`} alt="" />
              </Swiper.Item>
            </Swiper>

            <div className="proinfo">
              <div className="pricebox">
                <span>{'￥' + data.originprice}</span>
                <span>{"销量: " + data.sales}</span>
              </div>
              <div className="proname">
                <Tag color='danger'>{data.brand}</Tag>
                <Tag color='primary'>{data.category}</Tag>
                <span>{data.proname}</span>
              </div>
            </div>

          </Tabs.Tab>

          <Tabs.Tab title='推荐' key='recommend'>
            <Sell />
          </Tabs.Tab>

          <Tabs.Tab title={

            <Popover.Menu

              mode='dark'
              actions={actions}
              placement='bottom-start'
              onAction={node => Toast.show(`选择了 ${node.text}`)}
              trigger='click'
            >
              <AppstoreOutline fontSize={26} color="#000" />
            </Popover.Menu>
          } disabled key='more'>

          </Tabs.Tab>
        </Tabs>
      </div>

      <div className="footer">
        <div className="kefu">
          <i className='iconfont icon-kefu'></i>
          <span>客服</span>
        </div>
        <div className="shopcart">
          <i className='iconfont icon-gouwuche'></i>
          <span>
            购物车
          </span>
        </div>
        <div className="collect">
          <StarOutline />
          <span>收藏</span>
        </div>


        <Button shape='rounded' color='danger' onClick={() => { setVisible1(true) }}>加入购物车</Button>

        <Popup
          showCloseButton
          onClose={() => {setVisible1(false)}}
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          bodyStyle={{ height: '40vh' }}
        >
          <p className='buy'><span>购买数量</span> <Stepper min={0} digits={0} defaultValue={1} onChange={value => { setnum(value) }} /></p>
          <Button shape='rounded' className='yes' block color='danger' onClick={() => { add() }}>确认</Button>
        </Popup>
      </div>
    </div>
  )
}